<div class="home-all">
  <nz-layout class="layout">
    <nz-header>
      <div class="title"
           [ngStyle]="{'padding-left':isCollapsed?'3px':'0px','text-align':isCollapsed?'left':'center'}">
        <button nz-button nzType="primary" (click)="toggleCollapsed()">
          <i nz-icon [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"></i>
        </button>
        <span (click)="jump('/home')">{{system.systemName}}</span>
      </div>
      <div class="login" nz-dropdown [nzDropdownMenu]="menu" [nzTrigger]="'click'">
        <span class="userName">{{userInfo.appName}}</span>
        <!--        <nz-badge [nzCount]="1" style="margin-right: 5px">-->
        <nz-avatar nzSize="large" nzIcon="user" [ngClass]="'userImg'"
                   nzSrc="http://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></nz-avatar>
        <!--        </nz-badge>-->

      </div>
      <nz-dropdown-menu #menu="nzDropdownMenu">
        <ul nz-menu>
          <li nz-menu-item (click)="isPassWordVisible = true">修改密码</li>
          <li nz-menu-item (click)="isMaterialVisible = true">修改资料</li>
          <li nz-menu-item (click)="isAppSecretVisible = true">查看秘钥</li>
          <li nz-menu-item (click)="query()">我的资料</li>
          <li nz-menu-item (click)="logOut()">注销</li>
        </ul>
      </nz-dropdown-menu>
    </nz-header>
    <nz-layout>
      <nz-sider
        nzCollapsible
        [(nzCollapsed)]="isCollapsed"
        [nzBreakpoint]="'lg'"
        [nzCollapsedWidth]="0"
        [nzTrigger]="null"
      >
        <ul class="menu" nz-menu nzMode="inline" [nzInlineCollapsed]="isCollapsed"
            [nzTheme]="'dark'">
          <ng-container *ngTemplateOutlet="menuTpl; context: { $implicit: menus }"></ng-container>
          <ng-template #menuTpl let-menus>
            <ng-container *ngFor="let menu of menus">
              <li
                *ngIf="!menu.children"
                nz-menu-item
                [nzPaddingLeft]="menu.level * 24"
                [nzDisabled]="menu.disabled"
                [nzSelected]="menu.selected"
                (click)="jump(menu.url)"
              >
                <i nz-icon [nzType]="menu.icon" *ngIf="menu.icon"></i>
                <span>{{ menu.title }}</span>
              </li>
              <li
                *ngIf="menu.children"
                nz-submenu
                [nzPaddingLeft]="menu.level * 24"
                [nzOpen]="menu.open"
                [nzTitle]="menu.title"
                [nzIcon]="menu.icon"
                [nzDisabled]="menu.disabled"
              >
                <ul>
                  <ng-container *ngTemplateOutlet="menuTpl; context: { $implicit: menu.children}"></ng-container>
                </ul>
              </li>
            </ng-container>
          </ng-template>
        </ul>
      </nz-sider>
      <div class="inner-content">
        <router-outlet></router-outlet>
      </div>
    </nz-layout>
  </nz-layout>
  <!--  修改密码-->
  <nz-modal [(nzVisible)]="isPassWordVisible"
            nzTitle="修改密码"
            (nzOnCancel)="modifyPassWordCancel()"
            (nzOnOk)="modifyPassWordOk(passwordInfo)"
            [nzOkDisabled]="!(passwordInfo.newPassword.length>=6&&passwordInfo.newPassword===passwordInfo.againPassword)">
    <div>
      <span>原密码：</span>
      <div>
        <nz-input-group [nzSuffix]="password">
          <input [type]="passwordConfig.password ? 'text' : 'password'" nz-input
                 placeholder="原密码" [(ngModel)]="passwordInfo.password"/>
        </nz-input-group>
        <ng-template #password>
          <i nz-icon [nzType]="passwordConfig.password ? 'eye-invisible' : 'eye'"
             (click)="passwordConfig.password = !passwordConfig.password"></i>
        </ng-template>
      </div>
    </div>
    <div>
      <span>新密码(>6)：</span>
      <div>
        <nz-input-group [nzSuffix]="newPassword">
          <input
            [type]="passwordConfig.newPassword ? 'text' : 'password'"
            nz-input
            placeholder="请输入新密码"
            [(ngModel)]="passwordInfo.newPassword"/>
        </nz-input-group>
        <ng-template #newPassword>
          <i nz-icon [nzType]="passwordConfig.newPassword ? 'eye-invisible' : 'eye'"
             (click)="passwordConfig.newPassword = !passwordConfig.newPassword"></i>
        </ng-template>
      </div>
    </div>
    <div>
      <span>确认密码：</span>
      <div>
        <nz-input-group [nzSuffix]="againPassword">
          <input
            [type]="passwordConfig.againPassword ? 'text' : 'password'"
            nz-input
            placeholder="请输入"
            [(ngModel)]="passwordInfo.againPassword"/>
        </nz-input-group>
        <ng-template #againPassword>
          <i nz-icon [nzType]="passwordConfig.againPassword ? 'eye-invisible' : 'eye'"
             (click)="passwordConfig.againPassword = !passwordConfig.againPassword"></i>
        </ng-template>
      </div>
    </div>
  </nz-modal>
  <!--  修改资料-->
  <nz-modal [(nzVisible)]="isMaterialVisible"
            nzTitle="修改资料"
            (nzOnCancel)="modifyMaterialCancel()"
            (nzOnOk)="modifyMaterialOk(userInfo)"
            [nzOkDisabled]="!commonTool.notNull(userInfo.appName)">
    <div>
      <span>应用名称：</span>
      <div>
        <input nz-input placeholder="用户名" [(ngModel)]="userInfo.appName"/>
      </div>
    </div>
    <div class="checkbox">
      <label nz-checkbox [(ngModel)]="isUpdateSecret">
        <span>更新秘钥</span>
      </label>
    </div>
  </nz-modal>
  <!--查看秘钥-->
  <nz-modal [(nzVisible)]="isAppSecretVisible"
            nzTitle="查看秘钥"
            (nzOnCancel)="isAppSecretVisible=false"
            (nzOnOk)="isAppSecretVisible=false">
    <div>
      <span>应用AppId(点击复制)：</span>
      <div>
        <span><a (click)="copy(userInfo.appId,appId,appSecret)">{{userInfo.appId}}</a></span>
        <div class="second-pass" #appId>
          <i nz-icon nzType="check-circle" nzTheme="outline" class="icon"></i>
          <span>复制成功</span>
        </div>
      </div>
    </div>
    <div>
      <span>应用AppSecret(点击复制)：</span>
      <div>
        <span><a (click)="copy(userInfo.appSecret,appSecret,appId)">{{userInfo.appSecret}}</a></span>
        <div class="second-pass" #appSecret>
          <i nz-icon nzType="check-circle" nzTheme="outline" class="icon"></i>
          <span>复制成功</span>
        </div>
      </div>
    </div>
  </nz-modal>
  <!--查看资料-->
  <nz-modal [(nzVisible)]="isInfoVisible"
            nzTitle="查看资料"
            (nzOnCancel)="isInfoVisible=false"
            (nzOnOk)="isInfoVisible=false">
    <div>
      <span>云盘空间：</span>
      <div>
        <span>
          <a [title]="userInfo.cloudSpace" (click)="copyText(userInfo.cloudSpace)">
            {{userInfo.cloudSpace|space:''}}
          </a>
        </span>
      </div>
    </div>
    <div>
      <span>已使用空间：</span>
      <div>
        <span>
          <a [title]="userInfo.useSpace" (click)="copyText(userInfo.useSpace)">
            {{userInfo.useSpace|space:''}}
          </a>
        </span>
      </div>
    </div>
    <div>
      <span>开发者流量：</span>
      <div>
        <span>
          <a [title]="userInfo.freeFlow" (click)="copyText(userInfo.freeFlow)">
          {{userInfo.freeFlow|space:''}}
        </a>
        </span>
      </div>
    </div>
    <div>
      <span>获取流量地址(<span style="color: red">点击链接复制分享获取开发者流量</span>)：</span>
      <div>
        <span>
          <a [title]="url+userInfo.shareCode" (click)="copyText(url+userInfo.shareCode)">
          {{url + userInfo.shareCode}}
        </a>
        </span>

      </div>
    </div>
    <div>
      <span>积分：</span>
      <div>
        <span>
          <a [title]="userInfo.integral" (click)="copyText(userInfo.freeFlow)">
          {{userInfo.integral}}
        </a>
        </span>
      </div>
    </div>
  </nz-modal>
</div>
<nz-back-top></nz-back-top>
<!--<router-outlet></router-outlet>-->
